<!-- theme-color.vue - 主题色选择 -->
<template>
  <div class="drawer-item">
    <div class="drawer-item-header">
      <el-icon><Brush /></el-icon>
      <span>主题色</span>
    </div>
    
    <div class="theme-color-options">
      <div 
        v-for="color in themeColorOptions"
        :key="color.value"
        class="color-option"
        :class="{ 'is-active': themeColor === color.value }"
        :style="{ background: color.value }"
        @click="handleColorChange(color.value)"
      >
        <el-icon v-if="themeColor === color.value" class="check-icon" color="#fff">
          <Check />
        </el-icon>
      </div>
    </div>
    
    <!-- 🎯 自定义颜色选择器 -->
    <div class="custom-color-picker">
      <span class="picker-label">自定义颜色</span>
      <el-color-picker 
        v-model="customColor" 
        @change="handleCustomColorChange"
        :show-alpha="false"
        :predefine="predefineColors"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useTheme } from '@/composables/useTheme.js'
import { Brush, Check } from '@element-plus/icons-vue'

const {
  themeColor,
  themeColorOptions,
  setThemeColor
} = useTheme()

// 🎯 调试：打印主题色选项
console.log('🎨 [ThemeColor] 主题色选项:', themeColorOptions)
console.log('🎨 [ThemeColor] 当前主题色:', themeColor.value)

const customColor = ref(themeColor.value)

// 🎯 预定义颜色（供颜色选择器使用）
const predefineColors = themeColorOptions.map(item => item.value)

// 监听主题色变化，同步到自定义颜色选择器
watch(themeColor, (newVal) => {
  customColor.value = newVal
})

function handleColorChange(color) {
  setThemeColor(color)
}

function handleCustomColorChange(color) {
  if (color) {
    setThemeColor(color)
  }
}
</script>

<style lang="scss" scoped>
.theme-color-options {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-top: 12px;
}

.color-option {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid transparent;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  position: relative;
  overflow: hidden;
  
  // 添加内部白色边框效果
  &::before {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 5px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    pointer-events: none;
  }
  
  &:hover {
    transform: scale(1.15);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
  }
  
  &.is-active {
    border-color: #ffffff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    
    &::after {
      content: '';
      position: absolute;
      inset: -3px;
      border-radius: 8px;
      padding: 3px;
      background: linear-gradient(45deg, #ffffff, transparent);
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
    }
  }
  
  .check-icon {
    font-size: 18px;
    font-weight: bold;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
    z-index: 1;
  }
}

.custom-color-picker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid var(--el-border-color-light);
  background: var(--el-bg-color);
  
  .picker-label {
    font-size: 14px;
    color: var(--el-text-color-primary);
  }
}
</style>
